<template>
  <div class="hazard">
    <haz-tree @selected="categoryCheckHandler"/>
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;height: 30px;">
          <n-tab :options="tabOptions" @click="tabCheckHandler"/>
          <div>
            <el-button   size="small" @click="backHandler">返回</el-button>
            <el-button  style="float: right" size="small" plain type="primary">批量还原</el-button>
          </div>
         
        </div>
        <template v-if="columns && columns.length > 0">
            <dynamic-data-table ref="dataTable"
                :api="getTableData"
                :options="options"
                :columns="columns"
                :operates="operates"
                :query="models.selectFormModel"
                @handle-selection-change="handleSelectionChange"/>

          </template>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue,Ref} from 'vue-property-decorator';
import HazTree from "@/views/quality/components/HazTree.vue";
import NTab from "@/components/NTab.vue";
import DynamicDataTable from "@/components/DataTable/DynamicDataTable.vue";
import {getUserList} from "@/api/user";
import {getRecycleTitle,getRecycleList} from '@/api/dataSearch';
import {userTreeSelectData} from '@/api/areaManager';
import {restoreByIds,removeByIds} from "@/api/dataPrepare";


@Component({
  methods: {getUserList},
  components: {DynamicDataTable, HazTree,NTab}
})
export default class recycle extends Vue {

  @Ref('dataTable') dataTable!:any;
  @Ref('areaTreeSelect') areaTreeSelect!:any;

  private getTableData = getRecycleList;
  tabItem!:any;

  models:any={
    selectFormModel:{
      categoryId:'',
      structureId:'',
      prepareStatus:'',
      searchStatus:'0',
      bigCategoryId:'',
      midCategoryId:'',
      workId:'',
      areaId:'',
      id:''
    }
  }
  columns: any =[];
  tabOptions:any=[{label:'回收数据',status:'0'}]

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: true, // 是否支持列表项选中功能
  };

  
  dialog: any = {
    dialogFormVisible: false,
    dialogImportVisible: false,
    isEdit: false,
    isBatchEditDisabled: true,
    isBatchRemoveDisabled: true,
    selectParams: {
      clearable: true,
      placeholder: '请选择'
    },
    areaTreeParams: {
      clickParent: true,
      filterable: true,
      accordion: true,
      defaultExpandAll:true,
      data: [],
      props: {
        children: 'children',
        label: 'label',
        disabled: 'disabled',
        value: 'id'
      }
    }
  };

 
  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
    {
             //   label: '上报',
                type: 'primary',
                icon: 'el-icon-refresh-left',
                permission: 'bus:data:view',
                show: true,
      
                disabled: () => {
                    return false;
                },
                method: (index, row) => {
                  this.handleBatchRestore(row);
                },
                plain:true,
                tooltip:'数据还原'
            },
            {
                type: 'primary',
                icon: 'el-icon-delete',
                show: true,
                permission: 'bus:data:view',
   
                disabled: () => {
                    return false;
                },
                method: (index, row) => {
                    this.handleBatchDelete(row);
                },
                plain:true,
                tooltip:'删除数据'
            },
            {
               // label: '查看',
                type: 'primary',
                icon: 'el-icon-search',
                disabled: () => {
                    return false;
                },
                permission: 'bus:data:view',
                method: (index, row) => {
                    this.handleView(index, row);
                },
                plain:true,
                tooltip:'查看调查对象'
            },
    ]
  };


  backHandler(){
    this.$destroy();
    this.$router.go(-1);

  }
  handleBatchDelete(row){
     //删除
     this.$confirm('确定要删除选定数据吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return removeByIds([row.id]);
      }).then((response: any) => {
        this.dataTable.refresh();
        this.$message.success(response.msg);
      }).catch((e) => {
        console.error(e);
      });
  }
  handleView(index: number, row: any) {
      
      this.$router.push({ path: '/quality/surveyView', query: { dataId: row.id, structureId: row.structureId}});
  }

  handleBatchRestore(row) {
    //删除
      this.$confirm('确定要还原选定数据吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return restoreByIds([row.id]);
      }).then((response: any) => {
        this.dataTable.refresh();
        this.$message.success(response.msg);
      }).catch((e) => {
        console.error(e);
      });
  }

  
  tabCheckHandler(data){
    this.tabItem = data.item;
    this.models.selectFormModel.searchStatus = data.item.status;
    this.dataStatusChangeHandler('1');
  }

  areaSelectHandler(val){
    this.dataStatusChangeHandler('1');
  }

  getTitle(structureId?){
    if(structureId){
      getRecycleTitle({id:structureId}).then(res =>{
        this.columns = res.data;
        this.dataStatusChangeHandler('1');
    })
    }else{
      getRecycleTitle().then(res =>{
        this.columns = res.data;
        this.dataStatusChangeHandler('1');
    })
    }
   
  }

  dataStatusChangeHandler(val){
    if(this.dataTable){
            this.dataTable.refresh();
    }
  }
  
  categoryCheckHandler(data){
    this.models.selectFormModel.workId =  data.extra.rootId;
    const { code, level, polygon } = data.extra;
    if(code){
        this.getTitle(code);
    
        this.models.selectFormModel = {
          ...this.models.selectFormModel,
          categoryId: data.id,
          structureId: code,
          polygon: polygon || null
        };
    }else{
        this.getTitle();
        this.models.selectFormModel.categoryId = null;
        switch (level) {
          case 2:
            this.models.selectFormModel.midCategoryId =data.id;
            this.models.selectFormModel.bigCategoryId= null;
            break;
          case 1:
             this.models.selectFormModel.bigCategoryId =data.id;
            this.models.selectFormModel.midCategoryId =null;
            break;
          default:
            this.models.selectFormModel.workId = data.id;
            this.models.selectFormModel.bigCategoryId =null;
            this.models.selectFormModel.midCategoryId =null;
              break;
        }
    }
  }
  private handleSelectionChange(val) {
    console.log(val);
  }

  mounted(){
    this.tabItem = this.tabOptions[0];
    userTreeSelectData().then(res =>{
        if(this.areaTreeSelect){
            this.areaTreeSelect.treeDataUpdateFun(res.data);
        }else{
          this.dialog.areaTreeParams.data = res.data;
        }
       
    }).catch(e =>{
      console.error(e);
    })
  }
}
</script>
<style lang="scss" scoped>
.hazard{
  display: flex;
  gap: 2px;
  .ha-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .radio-t{
      display: flex;
      align-items: center;
      gap: 6px;
      span{
        font-size: 14px;
      }
    }
  }
}
.el-tree-select {
    height: 30px !important; /* 调整为你需要的高度 */
    input{
      height: 30px !important; /* 调整为你需要的高度 */
    }
}
.el-input__inner{
  height: 30px !important; /* 调整为你需要的高度 */
}

::v-deep .el-card .el-card__header {
    padding: 6px 10px !important;
}
::v-deep .el-card__body {
    padding: 0px 5px 0px 5px !important;
}
</style>
